<template>
  <div class='container'
       v-if="visible">
    <el-dialog :visible.sync="visible"
               width="80%"
               @close="dialogClose">
      <div class="content-wrapper">
        <el-row>
          <grid-layout :layout.sync="layout"
                       :col-num="14"
                       :row-height="35"
                       :is-draggable="false"
                       :is-resizable="false"
                       :is-mirrored="false"
                       :vertical-compact="true"
                       :margin="[20, 20]"
                       :use-css-transforms="true">
            <grid-item class="item"
                       ref="item"
                       v-for="(item,index) in layout"
                       :key="index"
                       :x=0
                       style="background-color:#fff"
                       :y=0
                       :w="item.w"
                       :h="item.h"
                       :i="item.i">
              <i class="el-icon-close delete-right"
                 @click="delMoudle(index)"
                 v-show="isEdit"></i>
              <component :key="index"
                         :is="item.i"
                         :height='item.h'
                         :type="item.i"
                         :projectId="project_ids"
                         @input="getNewsModal"
                         @openModel="getModel">
              </component>
            </grid-item>
          </grid-layout>
          <div style="margin-left:20px">
            <el-button type="primary"
                       @click="goBack">返回</el-button>
          </div>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import VueGridLayout from 'vue-grid-layout'
import ComponentProjectCount from '@/pages/layout/ComponentProjectCount.vue'
import ComponentDate from '@/pages/layout/ComponentDate'
import ComponentDongTai from '@/pages/layout/ComponentDongTai'
import ComponentgoujianCount from '@/pages/layout/ComponentgoujianCount'
import ComponentPersonCount from '@/pages/layout/ComponentPersonCount'
import ComponentType from '@/pages/layout/ComponentType'
import ComponentYewuCount from '@/pages/layout/ComponentYewuCount'
import ProjectListMap from '@/pages/layout/ProjectListMap'
import unitCountEcharts from '@/pages/layout/unitCountEcharts'
import projectComponentCount from '@/pages/layout/projectComponentCount'
import onKucunCount from '@/pages/layout/onKucunCount'
import processStateCount from '@/pages/layout/processStateCount'
import ComponentTotal from '@/pages/layout/ComponentTotal'
import ComponentTotalNext from '@/pages/layout/ComponentTotalNext'

import car from '@/pages/layout/ComponentDigitalPanel'
import child_company from '@/pages/layout/ComponentDigitalPanel'
import menber from '@/pages/layout/ComponentDigitalPanel'
import project_count from '@/pages/layout/ComponentDigitalPanel'
import component_count from '@/pages/layout/ComponentDigitalPanel'
import projected from '@/pages/layout/ComponentDigitalPanel'
import projecting from '@/pages/layout/ComponentDigitalPanel'
import gps from '@/pages/layout/ComponentDigitalPanel'
import rfid from '@/pages/layout/ComponentDigitalPanel'
import working from '@/pages/layout/ComponentDigitalPanel'
import worked from '@/pages/layout/ComponentDigitalPanel'
import projected_design from '@/pages/layout/ComponentDigitalPanel'
import projecting_design from '@/pages/layout/ComponentDigitalPanel'
import point_count from '@/pages/layout/ComponentDigitalPanel'
import mouth_capacity from '@/pages/layout/ComponentDigitalPanel'
import projected_factory from '@/pages/layout/ComponentDigitalPanel'
import projecting_factory from '@/pages/layout/ComponentDigitalPanel'

// 下面是新增的组件(11个)
import AnnualCumulative from '@/pages/layout/newComponent/AnnualCumulative'
import CattleManage from '@/pages/layout/newComponent/CattleManage'
import CumulativeContract from '@/pages/layout/newComponent/CumulativeContract'
import QuantityWork from '@/pages/layout/newComponent/QuantityWork'
import TotalNewSignatures from '@/pages/layout/newComponent/TotalNewSignatures'
import ArchitecturalTypes from '@/pages/layout/newComponent/ArchitecturalTypes'
import CapacityStatistics from '@/pages/layout/newComponent/CapacityStatistics'
import ContractItemDistribution from '@/pages/layout/newComponent/ContractItemDistribution'
import NewlySignedProjects from '@/pages/layout/newComponent/NewlySignedProjects'
import QuantityStatistics from '@/pages/layout/newComponent/QuantityStatistics'
import TotalContractAmount from '@/pages/layout/newComponent/TotalContractAmount'

export default {
  data () {
    return {
      visible: false,
      layout: [],
      show: false,
      addModule: false,
      gridData: [],
      lastLayout: this.layout,
      isEdit: false,
      project_ids: '',
      uuid: this.$route.query.uuid,
      newsVisible: false,
      newForm: {},
      modelVisible: false,
      modelSrc: ''
    }
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    car,
    child_company,
    menber,
    project_count,
    component_count,
    projected,
    projecting,
    gps,
    rfid,
    working,
    worked,
    projected_design,
    projecting_design,
    point_count,
    mouth_capacity,
    projected_factory,
    projecting_factory,
    onKucunCount,
    ComponentTotal,
    processStateCount,
    ProjectListMap,
    projectComponentCount,
    unitCountEcharts,
    ComponentProjectCount,
    ComponentDongTai,
    ComponentDate,
    ComponentgoujianCount,
    ComponentPersonCount,
    ComponentType,
    ComponentYewuCount,
    ComponentTotalNext,
    AnnualCumulative,
    CattleManage,
    CumulativeContract,
    QuantityWork,
    TotalNewSignatures,
    ArchitecturalTypes,
    CapacityStatistics,
    ContractItemDistribution,
    NewlySignedProjects,
    QuantityStatistics,
    TotalContractAmount
  },
  props: {
    dialogVisible: Boolean,
    layoutData: Object
  },
  watch: {
    dialogVisible (newval, oldval) {
      this.visible = newval
    },
    layoutData: {
      handler (newval, oldval) {
        this.layout = []
        this.layout.push(newval)
      },
      deep: true
    }
  },
  methods: {
    dialogClose () {
      this.$emit('update:dialogVisible', false)
    },
    goBack () {
      this.visible = false
      this.$emit('update:dialogVisible', false)
    },
    getNewsModal (list, data) {
      this.newsVisible = true
      this.newsVisible = true
      this.newForm.title = list.title
      this.newForm.name = list.username
      this.newForm.classify = data.name
      this.newForm.time = list.create_time
      this.newForm.content = list.content
    },
    getModel (url) {
      this.modelVisible = true
      this.modelSrc = url
    }
  },

  created () {
    this.visible = this.dialogVisible
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
</style>